<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="title">阳光研学</text>
      <text class="subtitle">让每一次旅行都充满意义</text>
    </view>

    <view class="login-form">
      <view class="form-item">
        <text class="iconfont icon-user"></text>
        <input 
          class="input" 
          type="text" 
          v-model="form.username" 
          placeholder="请输入用户名" 
          placeholder-class="placeholder"
        />
      </view>
      <view class="form-item">
          <text class="iconfont icon-lock"></text>
        <input 
          class="input" 
          type="password" 
          v-model="form.password" 
          placeholder="请输入密码" 
          placeholder-class="placeholder"
        />
      </view>
      <button class="login-btn" @tap="handleLogin">登录</button>
      <view class="register-link">
        还没有账号？
        <text @tap="goToRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      if (!this.form.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }
      if (!this.form.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }

      try {
        const res = await uniCloud.callFunction({
          name: 'login',
          data: this.form
        })

        if (res.result.code === 0) {
          // 保存用户信息和token到缓存
          uni.setStorageSync('userInfo', res.result.data.userInfo)
          uni.setStorageSync('token', res.result.data.token)

          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })

          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            // 跳转到首页
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: res.result.message,
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '登录失败，请稍后重试',
          icon: 'none'
        })
      }
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background-color: #fff;
  padding: 60rpx;

  .login-header {
    text-align: center;
    margin-bottom: 80rpx;

    .logo {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 20rpx;
      }

    .title {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .subtitle {
      font-size: 28rpx;
      color: #999;
    }
  }

  .login-form {
    .form-item {
      display: flex;
      align-items: center;
      height: 100rpx;
      border-bottom: 2rpx solid #eee;
      margin-bottom: 40rpx;

        .iconfont {
          font-size: 40rpx;
          color: #999;
          margin-right: 20rpx;
        }

        .input {
          flex: 1;
          height: 100%;
        font-size: 28rpx;
        }

      .placeholder {
        color: #ccc;
      }
    }

    .login-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(135deg, #4a6ee0, #3a5bc7);
      color: #fff;
      font-size: 32rpx;
      border-radius: 44rpx;
      margin-top: 60rpx;
    }

    .register-link {
      text-align: center;
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #999;

      text {
        color: #4a6ee0;
      }
    }
  }
}
</style>
